<template>
<div id="out24">
    <div id="top2">
    	        <a href="#/GeRenxx">
			<img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" />
			</a>
			<span>头像</span>
			<div>· · ·</div>
	</div>
	<div class="back"></div>
	<div class="run">图片</div>
	<div class="backk">
		<div>
			<p>从手机中选择</p>
			<p>拍照</p>
			<p>取消</p>
		</div>
	</div>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				$("#out24>#top2>div").click(function(){
					$("#out24>.backk").slideDown(500);
				});
				$("#out24>.backk>div>p").eq(2).click(function(){
					$(this).parent().parent().slideUp(500);
				});
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out24 a{
		color: #000000;
		text-decoration: none;
	}
	#out24{
		background: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out24>.back{
		height: 9.6rem;
	}
	#out24>#top2 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
		padding-left: 3rem;
		box-sizing: border-box;
	}
	#out24>#top2>div{
		font-size: 3rem;
		font-weight: 900;
	}
	#out24 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out24 #top2>span {
		width: 50rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		text-align: right;
		box-sizing: border-box;
		text-align: center;
		padding-right: 1rem;
	}
	#out24>.run{
		width: 50rem;
		height: 50rem;
		background: #FFFFFF;
		text-align: center;
		line-height: 50rem;
		color: #808080;
		font-size: 3.6rem;
		border-radius: 50%;
		margin-top: 8rem;
		margin-left: 11rem;
	}
	
	#out24>.backk{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,.3);
		position: fixed;
		top: 0;
		z-index: 50;
		display: none;
	}
	#out24>.backk>div{
		position: absolute;
		bottom: 0;
	}
	#out24>.backk>div>p{
		width: 100vw;
		text-align: center;
		line-height: 10rem;
		font-size: 2.8rem;
		border-top: 0.1rem solid #CCCCCC;
		height: 10rem;
		background: #FFFFFF;
	}
</style>